<template>
	<view class="content" :style="{'background-image': 'url(' + `${$hd.baseUrl}/images/bg-robtop.png` + ')'}" autoBack>
		<uv-navbar title="抢单大厅" leftIconColor="#fff" :titleStyle="{color:'#fff'}" :fixed="false"
			:safeAreaInsetTop="true" bg-color="rgba(0,0,0, .0)" @leftClick="leftClick">
		</uv-navbar>
		<!-- <view class="pos-wap padding"></view> -->
		<scroll-view class="list-box" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
			:refresher-threshold="100" refresher-background="#4CA0FF" :lower-threshold="40"
			@scrolltolower="onScrolltolower" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
			@refresherabort="onAbort">
			<view class="trim-box"></view>
			<ItemCard v-for="(item, index) in dataList" :dataItem="item" :key="index" />
		</scroll-view>
	</view>
</template>

<script>
	import ItemCard from '@/components/itemCard/index.vue'
	export default {
		components: {
			ItemCard
		},
		data() {
			return {
				triggered: false,
				finish: false,
				loading: false,
				pageNum: 1,
				total: 0,
				dataList: []
			}
		},
		onLoad() {
			this.loadList()
		},
		methods: {
			leftClick() {
				uni.navigateBack()
			},
			onRefresh() {
				this.triggered = true;
				this.finish = false;
				this.pageNum = 1;
				this.loadList();
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
				console.log("onRestore");
			},
			onAbort() {
				console.log("onAbort");
			},
			onScrolltolower() {
				if (this.loading) return;
				if (this.finish) return;
				this.pageNum++;
				this.loadList();
			},
			loadList() {
				// this.triggered = true
				this.loading = true;
				this.$http
					.get(
						"/cadre/assignOrder/highSeasList", {
							params: {
								pageNum: this.pageNum,
								pageSize: 10,
								...(this.$hd.position || {}),
							},
							custom: {
								toast: true
							}
						}
					)
					.then((res) => {
						this.loading = false;
						if (this.pageNum === 1) {
							this.dataList = res.data.rows;
						} else {
							this.dataList = [...this.dataList, ...res.data.rows];
						}

						if (this.dataList.length == res.data.total) {
							this.finish = true;
						}
						this.triggered = false;

					})
					.catch((err) => {
						console.log("err", err);
					});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100%;
		// background-image: url("/static/img-banner.png"); 
		background-size: 100% 660rpx;
		background-repeat: no-repeat;
		// background-position-y: -20px;
	}

	.trim-box {
		height: 166rpx;
	}

	.list-box {
		height: calc(100% - 100px);
		padding: 0 20rpx;
	}
</style>